<template>
  <van-swipe-cell v-for="item in cartData" :key="item.id">
    <van-card :price="item.price" :origin-price="item.initPrice" :title="item.title">
      <template #num>
        <van-stepper v-model="item.amount" min="1" step="1" />
      </template>
      <template #thumb>
        <input type="checkbox" :checked="item.checked">
        <van-image width="70" height="80" :src="item.image" style="vertical-align: middle;" />
      </template>
    </van-card>
    <template #right>
      <van-button square text="删除" type="danger" class="delete-button" />
    </template>
  </van-swipe-cell>
  <van-action-bar safe-area-inset-bottom>
    <van-action-bar-icon>
      <template #icon>
        <input type="checkbox" name="" id="">
      </template>
      <template #default>
        全选
      </template>
    </van-action-bar-icon>
    <van-action-bar-button type="danger" text="去结算" />
  </van-action-bar>
</template>

<script setup lang="ts">8
import { ref } from 'vue';

//进入的时候先判断有没有token，如果没有，就提示用户并跳转到登录页面

const cartData = ref([
  {
    "amount": 9,
    "checked": true,
    "id": 110207079,
    "title": "江西辣典100g纯辣片香辣辣条网红休闲零食欢乐鞋底手撕老式80后",
    "image": "https://img.alicdn.com/bao/uploaded/i3/2201315634/O1CN01pQEyKd1rUQ7hyDk0G_!!0-item_pic.jpg",
    "price": 6,
    "initPrice": 6
  }
])

</script>

<style lang="less" scoped>
.van-card {
  background-color: #fff;
  margin: 10px 0px;
  border: 1px solid #eeeeee;
}

.delete-button {
  height: 100%;
}

.cart-footer {
  width: 100%;
  height: 50px;
  position: fixed;
  bottom: 60px;
  background-color: skyblue;
}
.van-action-bar{
  margin-bottom: 50px;
}
</style>
